<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>考官实名认证</title>
	<meta name="viewport" content="width=device-width, initial-scale=1  maximum-scale=1 user-scalable=no">
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-touch-fullscreen" content="yes">
	<meta name="HandheldFriendly" content="True">

	<link rel="stylesheet" href="${request.contextPath}/statics/css/materialize.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/normalize.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/owl.carousel.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/owl.theme.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/owl.transitions.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/fakeLoader.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/style.css?r=1">


</head>
<body class="result">
<!-- side nav left-->
<div class="side-nav-panel-left">
	<ul id="slide-out-left" class="side-nav side-nav-panel collapsible">
		<li class="li-top">
			<div class="collapsible-header active"><i class="fa fa-home"></i>Home <span><i class="fa fa-caret-down"></i></span></div>
			<div class="collapsible-body">
				<ul class="side-nav-panel">
					<li><a href="index.html">Home Default</a></li>
					<li><a href="home-business.html">Home Business</a></li>
					<li><a href="home-portfolio.html">Home Portfolio</a></li>
					<li><a href="home-shop.html">Home Shop</a></li>
					<li><a href="home-blog.html">Home Blog</a></li>
				</ul>
			</div>
		</li>
		<li>
			<div class="collapsible-header"><i class="fa fa-shopping-cart"></i>Shop <span><i class="fa fa-caret-down"></i></span></div>
			<div class="collapsible-body">
				<ul class="side-nav-panel">
					<li><a href="home-shop.html">Shop</a></li>
					<li><a href="shop-single.html">Shop Single</a></li>
					<li><a href="checkout.html">Checkout</a></li>
				</ul>
			</div>
		</li>
		<li>
			<div class="collapsible-header"><i class="fa fa-file-o"></i>Pages <span><i class="fa fa-caret-down"></i></span></div>
			<div class="collapsible-body">
				<ul class="side-nav-panel">
					<li><a href="pricing.html">Pricing</a></li>
					<li><a href="error404.html">404</a></li>
					<li><a href="team.html">Team</a></li>
					<li><a href="testimonial.html">Testimonial</a></li>
				</ul>
			</div>
		</li>
		<li>
			<div class="collapsible-header"><i class="fa fa-bold"></i>Blog <span><i class="fa fa-caret-down"></i></span></div>
			<div class="collapsible-body">
				<ul class="side-nav-panel">
					<li><a href="home-blog.html">Blog Slider</a></li>
					<li><a href="blog.html">Blog</a></li>
					<li><a href="blog-single.html">Blog Single</a></li>
				</ul>
			</div>
		</li>
		<li><a href="about-us.html"><i class="fa fa-user"></i>About Us</a></li>
		<li><a href="contact.html"><i class="fa fa-envelope-o"></i>Contact Us</a></li>
		<li><a href="login.html"><i class="fa fa-sign-in"></i>Login</a></li>
		<li><a href="register.html"><i class="fa fa-user-plus"></i>Register</a></li>
	</ul>
</div>
<!-- end side nav left-->


<!-- register -->
<div id="rrapp" class="section" style="margin-top: 25px;">
	<div class="container">
		<div class="register" style="height: 450px;">
			<div class="register-title" style="text-align: center;">
				考官实名认证
			</div>
			<div class="register-row" style="height: 400px;">
				<form class="col s12">
					<div class="register-input">
						<label class="register-label">姓名<label style="color: red">*</label></label>
						<input type="text" class="validate" placeholder="请输入姓名" v-model="dataForm.userName" required>
					</div>
					<div class="register-input">
						<label class="register-label">证件号码<label style="color: red">*</label></label>
						<input type="text" placeholder="请输入身份证号" v-model="dataForm.idCard" class="validate" required>
					</div>
					<div class="register-input">
						<label class="register-label">手机号<label style="color: red">*</label></label>
						<input type="text" placeholder="请输入手机号" v-model="dataForm.phone" class="validate" required>
					</div>
					<div class="register-btns">
						<div class="register-btn" @click="signup">立即认证</div>
					</div>
				</form>
			</div>
		</div>
		<div style="background-color: #fff; border-radius: 5px; margin-top: 20px;">
			<div class="about-us-foot" style="color: #909399; text-align: left; padding: 10px 15px;">
				<p>温馨提示： </p>
				<p>1.请输入真实信息，点击立即认证按钮进行认证</p>
			</div>
		</div>
	</div>
</div>
<!-- end register -->

<!-- scripts -->
<script src="${request.contextPath}/statics/js/jquery.min.js"></script>
<script src="${request.contextPath}/statics/js/materialize.min.js"></script>
<script src="${request.contextPath}/statics/js/owl.carousel.min.js"></script>
<script src="${request.contextPath}/statics/js/fakeLoader.min.js"></script>
<script src="${request.contextPath}/statics/js/main.js"></script>
<script src="${request.contextPath}/statics/js/vue.min.js"></script>
<script>
	var vm = new Vue({
		el: '#rrapp',
		data: {
			dataForm: {
				userName: '',
				idCard: '',
				phone: '',
				company: '',
				clubId: '',

			},
			ifSelect: false,
			company: '',
			clubList: [],
			searchClubList:[],
		},
		created: function () {
			this.queryClubList();
		},
		watch: {
			company(value){
				if(this.ifSelect){
					return;
				}
				console.log(value)
				if(value){
					this.searchClubList = this.clubList.filter(result => result.clubName.toLowerCase().indexOf(value.toLowerCase()) >= 0);
				}else{
					this.searchClubList = []
				}
			}
		},
		methods:{
			searchClub(){
				this.ifSelect = false;
			},
			selectClub(item){
				console.log(item)
				this.ifSelect = true;
				this.dataForm.clubId = item.id;
				this.company = item.clubName;
				this.searchClubList = [];
			},
			queryClubList(){
				$.ajax({
					type: 'get',
					url: '${request.contextPath}/h5/queryClubList',
					data: {},
					success: function (res) {
						if(res.code === 0){
							vm.clubList = res.data;
							console.log(res)
						}else{
							alert(res.msg);
						}
					},
				});
			},


			signup(){
				$.ajax({
					type: 'get',
					url: '${request.contextPath}/h5/subSignup',
					data: this.dataForm,
					success: function (res) {
						if(res.code === 0){
							alert('报名成功');
						}else{
							alert(res.msg);
						}
					},
				});
			}

		}

	});
</script>


</body>
</html>
